import Drop from './Drop';

export const createLockAnimation = () => {
    const can: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
    //设置绘图环境
    const ctx: CanvasRenderingContext2D = can.getContext('2d') as CanvasRenderingContext2D;
    //获取浏览器窗口的宽高
    let w = (can.width = window.innerWidth);
    let h = (can.height = window.innerHeight);
    //让画布的宽高跟随浏览器窗口的变化而变化
    window.onresize = function () {
        w = can.width = window.innerWidth;
        h = can.height = window.innerHeight;
    };
    //设置画笔颜色
    ctx.fillStyle = 'aqua';
    //面向对象
    const drops: { [x: string]: any }[] = [];
    //新建一个雨滴实例化对象
    for (let i = 0; i < 30; i++) {
        const t = setTimeout(function () {
            const drop = new Drop(ctx, w, h);
            drops.push(drop);
            clearTimeout(t);
        }, i * 300);
    }
    const move = () => {
        //先复制透明层再绘制雨滴 雨滴就把先绘制的透明层覆盖 下一次绘制透明层
        //就会把之前绘制的雨滴覆盖 若干的透明层叠加就会越来越不透明
        ctx.fillStyle = 'rgba(0,0,0,0.1)';
        ctx.fillRect(0, 0, w, h);
        for (let k = 0; k < drops.length; k++) {
            drops[k].draw();
        }
        requestAnimationFrame(move);
    };
    move();
};
